<template>
    <view class="cn-component-verticalNav flex">
        <scroll-view :style="'height:calc(100vh - '+(height_sub?(height_sub+'rpx'):'0rpx')+')'" class="vertical_nav nav"
            :scroll-y="scroll_y === false ? false : true" :scroll-with-animation="false" :scroll-into-view="'verticalNav-left-'+scroll_into_left">
            <view :id="'verticalNav-left-'+item[list_key]" class="cu-item" :class="item[list_key]==scroll_into_left?'text-nddyny cur':''"
                v-for="(item, key) in list_left" :key="key" @tap="scrollIntoLeftChange($event.target.dataset.id)"
                :data-id="item[list_key]">
                <slot name="item_left" :item="item"></slot>
            </view>
        </scroll-view>
        <scroll-view style="width: 596rpx;" class="flex-sub bg-white" :style="'height:calc(100vh - '+(height_sub?(height_sub+'rpx'):'0rpx')+')'"
            :scroll-y="scroll_y === false ? false : true" :scroll-with-animation="false" :scroll-into-view="'verticalNav-right-'+scroll_into_right"
            @scroll="verticalNavRightScroll">
            <view :id="'verticalNav-right-'+item[list_key]" class="padding-left-20" v-for="(item,key) in list_left"
                :key="key" :data-id="item[list_key]">
                <nBar title_icon="cuIcon-title" :title="item.name" :is_solid_bottom="true" :bar_tb="26" class_title="text-13 text-bold"></nBar>
                <slot name="list_right" :list="object_right[item[list_key]]"></slot>
            </view>
        </scroll-view>
    </view>
</template>

<script>
    export default {
        props: [
            'scroll_y',
            'item_list_tab',
            'height_sub',
            'item_list_info'
        ],
        data() {
            return {
                list_key: '',
                item_list_tab_bak: '',
                list_left: [],
                object_right: {},

                scroll_into_left: '',
                scroll_into_left_bak: '',
                scroll_into_right: '',
            };
        },
        watch: {
            item_list_info() {
                if (this.item_list_tab == this.item_list_tab_bak) {
                    this.scroll_into_left_bak = this.scroll_into_left;
                }
                this.createdPageInit();
                this.mountedPageInit();
                let id = '';
                if (this.item_list_tab == this.item_list_tab_bak) {
                    id = this.scroll_into_left_bak;
                } else {
                    id = this.list_left[0][this.list_key];
                }
                this.scrollIntoLeftChange(id, 'left');
                this.item_list_tab_bak = this.item_list_tab;
            },
        },
        created() {
            this.item_list_tab_bak = this.item_list_tab;
            this.createdPageInit();
        },
        mounted() {
            this.mountedPageInit();
        },
        methods: {
            createdPageInit() {
                if (!this.item_list_info || !this.item_list_info.list_key) {
                    return;
                }
                this.list_key = this.item_list_info.list_key;
                this.list_left = this.item_list_info.list_left;
                this.scroll_into_left = this.scroll_into_right = this.list_left[0][this.list_key];

                let object_right = {};
                this.item_list_info.list_right.forEach(info => {
                    if (!object_right[info[this.list_key]]) {
                        object_right[info[this.list_key]] = [];
                    }
                    object_right[info[this.list_key]].push(info);
                })
                this.object_right = object_right;
            },
            mountedPageInit() {
                this.$nextTick(() => {
                    let main_tab_height = 0;
                    this.list_left.forEach(info => {
                        let list_key_value = info[this.list_key];
                        uni.createSelectorQuery()
                            .in(this)
                            .select("#verticalNav-right-" + list_key_value)
                            .boundingClientRect(data => {
                                info.__scroll_height_top = main_tab_height;
                                main_tab_height += data.height;
                                info.__scroll_height_bottom = main_tab_height;
                            }).exec();
                    })
                })
            },
            scrollIntoLeftChange(id, only_type) {
                this.scroll_into_left = '';
                if (only_type != 'left') {
                    this.scroll_into_right = '';
                }
                this.$nextTick(() => {
                    this.scroll_into_left = id;
                    if (only_type != 'left') {
                        this.scroll_into_right = id;
                    }
                });
            },
            verticalNavRightScroll(e) {
                let scroll_top = e.detail.scrollTop + 10;
                this.list_left.forEach(info => {
                    if (scroll_top * 1 >= info.__scroll_height_top * 1 && scroll_top * 1 <= info.__scroll_height_bottom *
                        1) {
                        this.scroll_into_left = info[this.list_key];
                    }
                });
            },
        },
    }
</script>

<style lang="less">
    .cn-component-verticalNav {
        .vertical_nav.nav {
            width: 154rpx;
            white-space: initial;

            .cu-item {
                width: 100%;
                height: auto;
                line-height: 1.2em;
                padding: 30rpx 20rpx;
                margin: 0;
                border: none;
                position: relative;
                background-color: #f8f8f8;

                &.cur {
                    background-color: #fff;
                }

                &.cur::after {
                    content: "";
                    width: 8rpx;
                    height: 30rpx;
                    border-radius: 10rpx 0 0 10rpx;
                    position: absolute;
                    background-color: currentColor;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                }
            }
        }
    }
</style>
